{% stylesheet %}
.block_image2 .block_image2_content {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  grid-column-gap: var(--column-gutter);
  box-sizing: border-box;
}

.block_image2 .block_image2_content .image-two-item {
  flex: 1;
  position: relative;
  box-sizing: border-box;
}

.block_image2 .block_image2_content .image-two-item img {
  width: 100%;
  height: auto;
}

.block_image2 .block_image2_content .image-two-item .default_image_number {
  font-size: 18px;
  color: #999;
  position: absolute;
  right: 20px;
  bottom: 14px;
}

@media screen and (max-width: 767px) {
  .block_image2 .block_image2_content .image-two-item .default_image_number {
    right: 8px;
    bottom: 5px;
    font-size: 14px;
  }
  .block_image2 .block_image2_content .image-two-item {
    flex: none;
    width: 100%;
    margin-bottom: var(--column-gutter);
  }
  .block_image2 .full_container_wrapper {
    padding-left: 0px;
    padding-right: 0px;
  }
	.block_image2_mobile_style1{
		display:flex;
	}
	.block_image2_mobile_style1 .image-two-item{
		flex:1 !important;
	}
}

{% endstylesheet %}
<div class="block_image2">
  <div class="{% if section.settings.is_width_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
    {% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

    <div class="block_image2_content block_image2_mobile_style{{section.settings.mobile_style}}" style="--column-gutter:{{section.settings.spacing}}px">
      {% for block in section.blocks %}
       <a href="{{block.image_link | setUrlDataFrom:data_from}}" data-tips="Please select the image link" class="image-two-item">
        {% if block.image.src =='' %} 
       		 <img data-src="{{ block.image.src |public_front_asset_url }}"  src="{{ 'empty.png' | public_asset_abs_dir_url  }}" alt="{{ block.image.alt }}" >
           <span class="default_image_number">Image-{{forloop.index}}</span>
				{% else %}
       		 <img data-src="{{ block.image.src |public_front_asset_url }}"  src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" alt="{{ block.image.alt }}" >
        {% endif %} 

      </a>
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
{
	"tag": "image2",
	"class": "block_image2",
	"is_global": false,
	"name": {
		"zh_CN": "单排图片",
		"en_US": "Row images"
	},
	"max_blocks": "5",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "detail"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_width_fill"
		},
		{
			"type": "card_input_number",
			"id": "spacing",
			"max": 200,
			"min": 0,
			"label": {
				"en_US": "Spacing",
				"zh_CN": "间距"
			},
			"info": {
				"zh_CN": "内容宽度单位为px",
				"en_US": "Content width in px"
			}
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "移动端样式",
				"en_US": "Mobile styles"
			},
      "id": "mobile_style",
      "option": [
        {
          "label": {
            "zh_CN": "竖向平铺",
				    "en_US": "Tile vertically"
          },
          "value": "0"
        },
        {
          "label": {
            "zh_CN": "横向平铺",
				    "en_US": "Lateral tiling"
          },
          "value": "1"
        }
      ],
			"info": {
				"zh_CN": "如选择横向平铺，建议使用2至4张图片",
				"en_US": "For lateral tiling, 2 to 4 images are recommended"
			},
			"default": "0"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "图片",
				"en_US": "Image"
			},
			"type": "image-item",
			"settings": [
				{
					"type": "card_image",
					"label": {
						"zh_CN": "图片",
						"en_US": "Image"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "建议宽度1000px以上，高度自适应",
						"en_US": "Recommended width more than 1000px, height adaptive"
					},
					"id": "image"
				},
				{
					"type": "card_page_link",
					"label": {
						"zh_CN": "链接",
						"en_US": "Link"
					},
					"default": {
						"type": "",
						"title": "",
						"url": ""
					},
					"id": "image_link"
				}
			]
		}
	],
	"default": {
		"settings": {
			"title": "Figure 2",
			"is_width_fill": false,
			"spacing": 30,
			"mobile_style":"0",
			"padding": {
				"top": "20",
				"left": "0",
				"right": "0",
				"bottom": "20"
			}
		},
		"blocks": [
			{
				"block_type": "image-item",
				"image": {
					"src": "",
					"alt": ""
				},
				"image_link": {
					"type": "",
					"title": "",
					"url": ""
				}
			},
			{
				"block_type": "image-item",
				"image": {
					"src": "",
					"alt": ""
				},
				"image_link": {
					"type": "",
					"title": "",
					"url": ""
				}
			},
			{
				"block_type": "image-item",
				"image": {
					"src": "",
					"alt": ""
				},
				"image_link": {
					"type": "",
					"title": "",
					"url": ""
				}
			}
		]
	},
	"icon": "icon-duotu2"
}
{% endschema %}